<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row v-show="showSearch">
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
            <el-form-item label="专业名称" prop="zymcId">
                <el-select v-model="state.queryForm.zymcId" filterable  style="width: 240px" clearable>
                    <el-option v-for="item in options"  :key="item.zymcId" :label="item.zymcName" :value="item.zymcId"/>
                </el-select>
            </el-form-item>
<!--      <el-form-item label="专业说明" prop="zymcDescription" >-->
<!--        <el-input placeholder="请输入专业说明" v-model="state.queryForm.zymcDescription" />-->
<!--      </el-form-item>-->
          <el-form-item>
            <el-button icon="search" type="primary" @click="getDataList">查询</el-button>
            <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"  v-auth="'train_jnglProfessionName_add'">新 增</el-button>
            <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'train_jnglProfessionName_del'" @click="handleDelete(selectObjs)">批量删除</el-button>
            <el-button type="success" :visible.sync="dialogTableVisible" @click="professionalname">新增专业等级</el-button>
            <el-button type="success" :visible.sync="centerDialogVisible" @click="addkeyPoints">新增关键点</el-button>
              <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button>-->
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
<!--        <div class="mb8" style="width: 100%">-->
<!--&lt;!&ndash;          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"  v-auth="'train_jnglProfessionName_add'">新 增</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'train_jnglProfessionName_del'" @click="handleDelete(selectObjs)">批量删除</el-button>&ndash;&gt;-->
<!--          <right-toolbar v-model:showSearch="showSearch" :export="'train_jnglProfessionName_export'"-->
<!--           @exportExcel="exportExcel" class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>-->
<!--        </div>-->
      </el-row>
      <el-table @click="getRowData" :data="state.dataList" v-loading="state.loading" border
                :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
		@selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="zymcId" label="专业名称业务主键"  show-overflow-tooltip/>
        <el-table-column prop="zymcName" label="专业名称"  show-overflow-tooltip/>
        <el-table-column prop="zymcDescription" label="专业说明"  show-overflow-tooltip/>
<!--        <el-table-column prop="remark" label="备注"  show-overflow-tooltip/>-->
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button icon="edit-pen" text type="primary" v-auth="'train_jnglProfessionName_edit'"
              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
            <el-button icon="delete" text type="primary" v-auth="'train_jnglProfessionName_del'" @click="handleDelete([scope.row.id])">删除</el-button>
            <el-button icon="Plus"  text type="primary" :visible.sync="dialogFormVisible"  @click="getSelectedRows(scope.row)">新增专业等级</el-button>
            <el-button icon="Plus" text type="primary" :visible.sync="outerVisible"  @click="keyPoints(scope.row)">新增关键点</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
      <!-- 当条数据新增专业等级 -->
      <el-dialog v-model="dialogFormVisible" title="新增" @close="clean3">
          <el-form :model="form"  :rules="dataRules3" ref="formList">
              <el-form-item label="专业名称" :label-width="formLabelWidth" prop="zymcName">
                  <el-input v-model="form.zymcName" autocomplete="off" disabled  />
              </el-form-item>
              <el-form-item label="专业等级" :label-width="formLabelWidth" prop="zydjName">
                  <el-input v-model="form.zydjName" autocomplete="off" />
              </el-form-item>
              <el-form-item label="等级说明" :label-width="formLabelWidth" prop="zydjDescription">
                  <el-input v-model="form.zydjDescription" type="textarea"/>
              </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :visible.sync="dialogFormVisible" @click="onSubmitList">提交</el-button>
      </span>
          </template>
      </el-dialog>
      <!-- 新增专业等级 -->
      <el-dialog v-model="dialogTableVisible " title="新增"  @close="clean">
          <el-form class="content" :model="ruleForm"  ref="dataFormRef" :rules="dataRules1">
              <el-form-item label="专业名称" :label-width="formLabelWidth"  prop="zymcId">
                  <el-select v-model="ruleForm.zymcId" filterable :required="true"  @change="handleNew">
                      <el-option v-for="item in options"  :key="item.zymcId" :label="item.zymcName" :value="item.zymcId"/>
                  </el-select>
              </el-form-item>
              <el-form-item label="专业等级" :label-width="formLabelWidth" prop="zydjName">
                  <el-input v-model="ruleForm.zydjName" autocomplete="off" />
              </el-form-item>
              <el-form-item label="等级说明" :label-width="formLabelWidth"  prop="zydjDescription">
                  <el-input v-model="ruleForm.zydjDescription" type="textarea"/>
              </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogTableVisible  = false">取消</el-button>
        <el-button type="primary" :visible.sync="dialogTableVisible " @click="onSubmit">提交</el-button>
      </span>
          </template>
      </el-dialog>
      <!-- 当条数据新增关键点 -->
      <el-dialog v-model="outerVisible" title="新增" @close="clean2">
          <el-form :model="pointsform"  :rules="dataRules4" ref="points">
              <el-form-item label="专业名称" :label-width="formLabelWidth" prop="zymcName">
                  <el-input v-model="pointsform.zymcName" autocomplete="off" disabled  />
              </el-form-item>
              <el-form-item label="专业等级" prop="zydjId" :label-width="formLabelWidth">
                  <el-select v-model="pointsform.zydjId" filterable  style="width: 240px" @change="handleNew2" >
                      <el-option v-for="item in zydjnamelist"  :key="item.zydjId" :label="item.zydjName" :value="item.zydjId"/>
                  </el-select>
              </el-form-item>
              <el-form-item label="关键点" :label-width="formLabelWidth" prop="keyPoint">
                  <el-input v-model="pointsform.keyPoint" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
                  <el-input v-model="pointsform.remark" type="textarea"/>
              </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="outerVisible = false">取消</el-button>
        <el-button type="primary" :visible.sync="outerVisible" @click="onSubmitList1">提交</el-button>
      </span>
          </template>
      </el-dialog>
      <!--  新增关键点 -->
      <el-dialog v-model="centerDialogVisible" title="新增" @close="clean1">
          <el-form :model="keypointsform"  :rules="dataRules2" ref="pointsformlist">
              <el-form-item label="专业名称" :label-width="formLabelWidth"  prop="zymcId">
                  <el-select v-model="keypointsform.zymcId" filterable :required="true" @change="handleNew1">
                      <el-option v-for="item in options"  :key="item.zymcId" :label="item.zymcName" :value="item.zymcId"/>
                  </el-select>
              </el-form-item>
              <el-form-item label="专业等级" :label-width="formLabelWidth" prop="zydjId">
                  <el-select v-model="keypointsform.zydjId" filterable  style="width: 240px" >
                      <el-option v-for="item in zydjnamelist"  :key="item.zydjId" :label="item.zydjName" :value="item.zydjId"/>
                  </el-select>
              </el-form-item>
              <el-form-item label="关键点" :label-width="formLabelWidth" prop="keyPoint">
                  <el-input v-model="keypointsform.keyPoint" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="备注" :label-width="formLabelWidth" prop="keyDescription">
                  <el-input v-model="keypointsform.keyDescription" type="textarea"/>
              </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" :visible.sync="centerDialogVisible" @click="onSubmit1">提交</el-button>
      </span>
          </template>
      </el-dialog>

    <!-- 编辑、新增  -->
    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />

  </div>
</template>

<script setup lang="ts" name="systemJnglProfessionName">
import { BasicTableProps, useTable } from "/@/hooks/table";
import { fetchList, delObjs, putObj, addObj} from '/@/api/train/jnglProfessionName';
import { useMessage, useMessageBox } from "/@/hooks/message";
import { useDict } from '/@/hooks/dict';
import { rule } from '/@/utils/validate';
import {addobj  } from "/@/api/train/jnglKeyPoints";
import {addList} from '/@/api/train/jnglProfessionLevel';
import { getLevel, professionalnameList } from '/@/api/train/jnglProfessionLevel';
import { ref } from 'vue';
// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义查询字典

// 定义变量内容
const formDialogRef = ref()
// 搜索变量
const queryRef = ref()
const showSearch = ref(true)
const dataFormRef = ref();
const formList =ref();
const pointsformlist = ref();
const  points =ref();
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)
const dialogFormVisible = ref(false)
const outerVisible = ref(false)
const dialogTableVisible = ref(false)
const centerDialogVisible = ref(false)
const formLabelWidth = '140px'
const options =reactive([{
	zymcName: '',
	zymcId: ''
}])
const dataRules1 = ref({
	zymcId: [{ required: true, message: '专业名称不能为空', trigger: 'blur' }],
	zydjName: [{ required: true, message: '专业等级不能为空', trigger: 'blur' }],
})
const dataRules2 = ref({
	zymcId: [{ required: true, message: '专业名称不能为空', trigger: 'blur' }],
	zydjId: [{ required: true, message: '专业等级不能为空', trigger: 'blur' }],
	keyPoint:[{ required: true, message: '关键点不能为空', trigger: 'blur' }],
})
const dataRules3 = ref({
	zymcName: [{ required: true, message: '专业名称不能为空', trigger: 'blur' }],
	zydjName: [{ required: true, message: '专业等级不能为空', trigger: 'blur' }],
})
const dataRules4 = ref({
	zymcName: [{ required: true, message: '专业名称不能为空', trigger: 'blur' }],
	zydjId: [{ required: true, message: '专业等级不能为空', trigger: 'blur' }],
	keyPoint:[{ required: true, message: '关键点不能为空', trigger: 'blur' }],
})
const form = reactive({
	zydjDescription: '',
	zydjName: '',
	zymcId: '',
	zymcName:''
})
const form1 = reactive({
	zymcName: '',
})
const pointsform = reactive({
	keyPoint:'',
	zymcId:'',
	remark:'',
	zydjId:''

});
const zydjnamelist = reactive([{
	zydjName: '',
	zydjId: ''
}])
const keypointsform = reactive({
	zydjDescription:'',
    zydjId:'',
    zymcId:'',
})
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: fetchList
})
//  table hook
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
	tableStyle
} = useTable(state)

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  getDataList()
}
const myForm = ref(null)
const router = useRouter();
const ruleForm = reactive({
	zydjName:'',
	zydjDescription:'',
	zydjId:''
})
// 重置新增专业等级form表单
const clean = () => {
	dataFormRef.value.resetFields();
}
// 重置新增关键点
const clean1 = () => {
	pointsformlist.value.resetFields();
}
const clean2 = () => {
	points.value.resetFields();
}
const clean3 = () => {
	formList.value.resetFields();
}

// 导出excel
const exportExcel = () => {
  downBlobFile('/train/jnglProfessionName/export', Object.assign(state.queryForm, { ids: selectObjs }), 'jnglProfessionName.xlsx')
}

// 多选事件
const selectionChangHandle = (objs: { id: string;zymcName:string,zymcId:string }) => {
  selectObjs.value = objs.map(({ id }) => id);
  selectObjs.value1 = objs.map(({ zymcName }) =>zymcName)
  selectObjs.value2 = objs.map(({ zymcId }) =>zymcId)
  multiple.value = !objs.length;
  // console.log(objs,'jiance');
  // var objs = selectObjs.value

};
const getRowData=(row) => {
	console.log(row.zymcId,'12121'); // 输出专业名称业务主键
	console.log(row.zymcName,'2323'); // 输出专业名称
	// 在这里，你可以根据 row 对象做任何你需要的操作
}
// 新增单条专业等级获取专业名称
const getSelectedRows = (row) =>{
	form.zymcName =row.zymcName
	form.zymcId=row.zymcId
	console.log(row.zymcId,'输出专业名称业务主键'); // 输出专业名称业务主键
	console.log(row.zymcName,'输出专业'); // 输出专业
	dialogFormVisible.value = true;
	// console.log('弹窗',dialogFormVisible);

}
//新增单条关键点获取
const keyPoints = (row)=>{
	pointsform.zymcName=row.zymcName
	pointsform.zymcId = row.zymcId
	console.log('id',pointsform.zymcId);
	console.log('名称',form.zymcName);
	getLevel(pointsform.zymcId ).then((res) => {
		zydjnamelist.length = 0;
		for (let index = 0; index < res.data.length; index++) {
			zydjnamelist.push({
				zydjName: res.data[index].zydjName,
				zydjId: res.data[index].zydjId
			});
		}
		console.log("查询分类===>",zydjnamelist);
	})
	outerVisible.value = true;
 }

professionalnameList().then((res) => {
	options.length = 0;
	for (let index = 0; index < res.data.length; index++) {
		options.push({
			zymcName: res.data[index].zymcName,
			zymcId: res.data[index].zymcId,
		});
	}
	console.log("查询分类===>",options);
});
// 关键点---专业名称
const addkeyPoints = async (zymcName: string) =>{
	centerDialogVisible.value = true;
	console.log('弹窗',centerDialogVisible);
	professionalnameList().then((res) => {
		options.length = 0;
		for (let index = 0; index < res.data.length; index++) {
			options.push({
				zymcName: res.data[index].zymcName,
				zymcId: res.data[index].zymcId,
			});
		}
		console.log("查询分类===>",options);
	});
}
//专业等级----专业名称
const professionalname = async (zymcName: string) =>{
	dialogTableVisible.value = true;
	console.log('弹窗',dialogTableVisible);
	professionalnameList().then((res) => {
		options.length = 0;
		for (let index = 0; index < res.data.length; index++) {
			options.push({
				zymcName: res.data[index].zymcName,
				zymcId: res.data[index].zymcId,
			});
		}
	});
}

// 新增专业等级
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;
	try {
		dialogTableVisible.value = true;
		await addList(ruleForm,options.zymcId);
		useMessage().success('添加成功');
		dialogTableVisible.value= false;
        // ruleForm.zymcId = '',
        // ruleForm.zydjName = '',
        // ruleForm.zydjDescription = ''
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		dialogTableVisible.value = false;
	}
};


// 专业等级
const handleNew = async () => {
	console.log(pointsform.zymcId,"zymcId");
	var zid = ruleForm.zymcId;
	getLevel(zid).then((res) => {
		zydjnamelist.length = 0;
		for (let index = 0; index < res.data.length; index++) {
			zydjnamelist.push({
				zydjName: res.data[index].zydjName,
				zydjId: res.data[index].zydjId
			});
		}
		console.log("查询分类===>",zydjnamelist);
	})
}

// 关键点-专业等级
const handleNew1 = async () => {
	// console.log(keypointsform.zymcId,"zymcId");
	var zide = keypointsform.zymcId;
	getLevel(zide).then((res) => {
		zydjnamelist.length = 0;
		for (let index = 0; index < res.data.length; index++) {
			zydjnamelist.push({
				zydjName: res.data[index].zydjName,
				zydjId: res.data[index].zydjId
			});
		}
		// console.log("查询分类===>",zydjnamelist);
	})
}

// 新增单条专业等级
const onSubmitList = async () => {
	const valid = await formList.value.validate().catch(() => {});
	if (!valid) return false;
	try {
		dialogFormVisible.value = true;
		await addList(form);
		useMessage().success('添加成功');
		dialogFormVisible.value= false;
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		dialogFormVisible.value = false;
	}
};
// 新增单条关键点
const onSubmitList1 = async () => {
	const valid = await points.value.validate().catch(() => {});
	if (!valid) return false;
	try {
		outerVisible.value = true;
		await addobj(pointsform);
		useMessage().success('添加成功');
		outerVisible.value= false;
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		outerVisible.value = false;
	}
};
// 新增关键点
const onSubmit1 = async () => {
	const valid = await pointsformlist.value.validate().catch(() => {});
	if (!valid) return false;
	try {
		centerDialogVisible.value = true;
		await addobj(keypointsform,options.zymcId);
		useMessage().success('添加成功');
		centerDialogVisible.value= false;
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		centerDialogVisible.value = false;
	}
};

// 删除操作
const handleDelete = async (ids: string[]) => {
	try {
		await useMessageBox().confirm('确定要删除该专业名称吗?此操作不可撤回');
	} catch {
		return;
	}

	try {
		await delObjs(ids);
		getDataList();
		useMessage().success('删除成功');// }
  } catch (err: any) {
    useMessage().error(err.msg);
  }
};
</script>
